<template>
  <div>
    <div>
      <div style="margin-bottom:5px">
        sql语句：
      </div>
      <div style="editorSet clearfix">
        
          <div>
            <div class="editor" style="border: 1px solid darkgrey">
              <div ref="ace" class="edit-area"></div>
            </div>
          </div>
      </div>
    </div>
    <div>


      <div style="margin-bottom:5px;margin-top:10px">
        响应数据：
      </div>
      <div>
        <div style="editorSet clearfix">
        
            <div class="editor" style="border: 1px solid darkgrey">
              <div style="height:230px;overflow-y:auto" contenteditable="true">
                  <JsonView :data="data"></JsonView>
                  
              </div>
            </div>
      </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer" style="margin-top:20px;float:right">
      <el-button @click="dataExample">数据实例</el-button>
      <el-button type="success" @click="refresh">刷新数据</el-button>
      <el-button type="primary" @click="apply">确认应用</el-button>
    </div>

    <el-dialog title="数据实例" :visible.sync="open" width="1000px"  append-to-body >

      <div style="overflow-y:auto;height:400px">

        <JsonView :data="staticDataValue"></JsonView>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import ace from "ace-builds";
import "ace-builds/webpack-resolver"; // 在 webpack 环境中使用必须要导入
import "ace-builds/src-noconflict/theme-monokai"; // 默认设置的主题
import "ace-builds/src-noconflict/mode-javascript"; // 默认设置的语言模式
import {js_beautify} from '../../../../../cms/js/beautify.js'
import JsonView from 'vue-json-views'
import { chartBIanalysis } from "@/api/tool/datav/chartApi";

export default {
  props:["dataBase","staticValue"],
  components: { 
    JsonView
  },
   data() {
    
    return {
      aceEditor: null,
      themePath: "ace/theme/xcode", // 不导入 webpack-resolver，该模块路径会报错
      modePath: "ace/mode/sql", // 同上
      database: this.dataBase,
      data:[],
      validFlag:false,
      open:false,
      staticDataValue :this.staticValue
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.aceEditor = ace.edit(this.$refs.ace, {
        maxLines: 20, // 最大行数，超过会自动出现滚动条
        minLines: 10, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
        fontSize: 14, // 编辑器内字体大小
        theme: this.themePath, // 默认设置的主题
        mode: this.modePath, // 默认设置的语言模式
        tabSize: 4, // 制表符设置为 4 个空格大小
        showPrintMargin: false, //去除编辑器里的竖线
        wrap:"free",//自动换行
        
      });
      if(this.database.sqlType == 'custom'){
        this.aceEditor.setValue(this.database.executeSql);
      }
      
    });
  },
  methods: {
    apply(){

      if(this.validFlag){
         this.$emit("changeDataBase", { database: JSON.parse(JSON.stringify( this.database )), bi: null});
      }else{
        this.msgError("请先刷新数据");
      }
    },
    refresh(){
      let val = this.aceEditor.getValue();
      //select * from carbon where city = '北京'
      if(val == "" ){
        this.msgError("请输入自定义sql语句");
      }
      else if(!this.checkSqlInj(val)){

        this.database.executeSql = val;
        this.database.sqlType = 'custom';

        try {
          chartBIanalysis(this.database).then(response => {
          
            if(response.code == 200){
              this.data = response.data;
              this.validFlag = true;
            }
          });
          
        } catch (error) {

          console.log(error)

        }
        
      }

    },
    checkSqlInj(testInput) {
        let sqls = ["update" ,"insert" ,"delete","drop"];
        let invalid = false;
        let chkInput = (testInput + "").toLowerCase();
        let pos = -1;
        for (let i = 0, n = sqls .length; i < n; i++) {
          pos = chkInput.indexOf(sqls [i]);
          if (pos != -1) {
            this.msgError("输入错误：含有非法字符\"" + testInput.substr(pos, sqls [i].length) + "\"!");
            invalid = true;
            break;
          }
        }
        return invalid;

    },
    dataExample(){
      this.open = true;
    },
    cancel(){
      this.open = false
    }
  }
}
</script>

<style scoped>
@media screen and (min-width: 960px) {
  .editorSet {
    width: 100%;
  }
  .editorSet .editor {
    height: 230px;
    width: 48%;
    overflow-y: hidden;
    background-color: rgb(44, 52, 55);
    float: left;
  }
}

@media screen and (max-width: 959px) {
  .editorSet {
    width: 100%;
  }
  .editorSet .editor {
    height: 230px;
    width: 100%;
    overflow-y: hidden;
    background-color: rgb(44, 52, 55);
  }
}

.NightTheme .editorSet .editor {
  -webkit-box-shadow: inset 0 1px 3px rgb(22, 26, 27);
  -moz-box-shadow: inset 0 1px 3px rgb(22, 26, 27);
  box-shadow: inset 0 1px 3px rgb(22, 26, 27);
}

.label {
  background: rgba(230, 230, 230, 0.5);
  height: 20px;
  padding: 0 6px;
  line-height: 20px;
  z-index: 999;
  text-align: center;
  font-size: 12px;
  color: #bbb;
  border-radius: 3px;
}

.editor iframe {
  border: 0 !important;
  min-height: 100px;
  min-width: 100px;
  height: 100%;
  width: 100%;
}

.edit-area {
  height: 100%;
}
</style>